<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <history-hot
      v-if="bloakshow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @parhislistchange="parhislistchange"
      @parhislistchange2="parhislistchange2"
      @parDel="parDel"
    />
    <search-list
      v-if="bloakshow == 2"
      :searchlist="searchlist"
      @parlist="parlist"
    />
    <search-tiplist
      v-if="bloakshow == 3"
      :SearchTiplist="SearchTiplist"
      @parentchange="parchange"
    />
  </div>
</template>

<script>
import HistoryHot from "../components/HistoryHot.vue";
import SearchList from "../components/SearchList.vue";
import SearchTiplist from "../components/SearchTiplist.vue";
import { GetHistoryHot, GetSearchList, GetSearchTiplist } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      defaultKeyword: "",
      historyKeywordList: "",
      hotKeywordList: "",
      bloakshow: 1,
      searchlist: "",
      SearchTiplist: "",
    };
  },
  components: {
    HistoryHot,
    SearchList,
    SearchTiplist,
  },
  methods: {
    onSearch(val) {
      this.bloakshow = 3;
      let invall = (this.value = val);
      GetSearchTiplist({ keyword: invall }).then((res) => {
        //    console.log(res);
        this.SearchTiplist = res.data.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    onInput() {
      this.bloakshow = 2;
      let inval = this.value;
      GetSearchList({ keyword: inval }).then((res) => {
        // console.log(res);
        this.searchlist = res.data;
      });
    },
    parchange(val) {
      //   console.log(val);
      let inval = this.value;
      if (val == "a") {
        GetSearchTiplist({
          keyword: inval,
          order: "",
          size: 20,
          sort: "price",
        }).then((res) => {
          //    console.log(res);
          this.SearchTiplist = res.data.data;
        });
      } else if (val == "b") {
        GetSearchTiplist({
          keyword: inval,
          order: "desc",
          size: 20,
          sort: "price",
        }).then((res) => {
          //    console.log(res);
          this.SearchTiplist = res.data.data;
        });
      } else if (val == "c") {
        GetSearchTiplist({
          keyword: inval,
          order: "asc",
          size: 20,
          sort: "price",
        }).then((res) => {
          //    console.log(res);
          this.SearchTiplist = res.data.data;
        });
      }
    },
    parhislistchange(v) {
      let inval = (this.value = v);
      this.bloakshow = 3;
      GetSearchTiplist({ keyword: inval, size: 20 }).then((res) => {
        // console.log(res);
        this.SearchTiplist = res.data.data;
      });
    },
    parhislistchange2(v2) {
      let inval2 = (this.value = v2);
      this.bloakshow = 3;
      GetSearchTiplist({ keyword: inval2, size: 20 }).then((res) => {
        // console.log(res);
        this.SearchTiplist = res.data.data;
      });
    },
    parlist(v3) {
      let inval3 = (this.value = v3);
      this.bloakshow = 3;
      GetSearchTiplist({ keyword: inval3, size: 20 }).then((res) => {
        // console.log(res);
        this.SearchTiplist = res.data.data;
      });
    },
    parDel(v4) {
      this.historyKeywordList = v4;
    },
  },
  created() {
    GetHistoryHot().then((res) => {
      // console.log(res);
      this.defaultKeyword = res.data.defaultKeyword;
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
    });
  },
};
</script>

<style lang="less">
.search {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: #efefef;
  z-index: 1;
}
</style>